<template>
  <div class="admin-container">
    <el-container>
      <!-- 侧边栏菜单 -->
      <el-aside width="200px" class="sidebar" style="background-color: #001427">
        <h1 style="height: 48px;background-color: #001427;color: #fff;text-align: center;line-height: 48px">管理员控制台</h1>
        <a-menu
          v-model:openKeys="menu.openKeys"
          v-model:selectedKeys="menu.selectedKeys"
          mode="inline"
          theme="dark"
          :inline-collapsed="menu.collapsed"
          :items="menu.items"
          @click="handleMenuClick"
        ></a-menu>
      </el-aside>
      <!-- 主内容区域 -->
      <el-main class="p-0">
        <el-header style="padding: 0;height: 48px">
          <div style="height: 100%" class="admin-header">
            <span style="color:#999;font-size: 14px" class="m-4">欢迎进入标注管理员后台</span>
            <div class="mr-4">
              <a-dropdown arrow >
                <a class="cursor-pointer" style="" @click.prevent>
                  管理员
                </a>
                <template #overlay>
                  <a-menu @click="handleUserMenuClick">
                    <a-menu-item key="1">
                      <a href="javascript:;">修改密码</a>
                    </a-menu-item>
                    <a-menu-item key="2">
                      <a href="javascript:;">退出登录</a>
                    </a-menu-item>
                  </a-menu>
                </template>
              </a-dropdown>
            </div>
          </div>
        </el-header>
        <!-- 用户管理模块 -->
        <UserList v-show="menu.selectedKeys[0]==='1'" ref="userListRef" />
        <!-- 文件管理模块 -->
        <FileList v-show="menu.selectedKeys[0]==='2'" ref="fileListRef" />
        <!-- Excel管理模块 -->
        <ExcelList v-show="menu.selectedKeys[0]==='3'"  ref="excelListRef"/>
      </el-main>
    </el-container>

  </div>
</template>

<script setup>
import { reactive, ref, h } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useUserStore } from '@/store/user'
import UserList from '@/components/admin/UserList.vue'
import FileList from '@/components/admin/FileList.vue'
import ExcelList from '@/components/admin/ExcelList.vue'
import { UserOutlined,ProfileOutlined,FileExcelOutlined } from '@ant-design/icons-vue'
import { Modal } from 'ant-design-vue'

const router = useRouter()
const { user } = useUserStore()
const userListRef = ref(null)
const fileListRef = ref(null)
const excelListRef = ref(null)

const menu = reactive({
  collapsed: false,
  openKeys: [],
  selectedKeys: ['1'],
  items: [
    {
      key: '1',
      icon: () => h(UserOutlined ),
      label: '用户管理',
      title: '用户管理',
    },
    {
      key: '2',
      icon: () => h(ProfileOutlined),
      label: '文件管理',
      title: '文件管理',
    },
    {
      key: '3',
      icon: () => h(FileExcelOutlined),
      label: 'Excel管理',
      title: 'Excel管理',
    }
  ]
})

const handleMenuClick = (value) => {
  const {key} = value
  switch (key) {
    case '1':
      // 用户管理
      if (userListRef.value) {
        userListRef.value.getUserList()
      }
      break
    case '2':
      // 文件管理
      if (fileListRef.value) {
        fileListRef.value.getFileList()
      }
      break
    case '3':
      // Excel管理
      if (excelListRef.value) {
        excelListRef.value.getExcelList()
      }
      break
  }
}

const handleUserMenuClick = (value) => {
  switch (value.key) {
    case '1':
      // 修改密码
      break
    case '2':
      // 退出登录
      logout()
      break
    default:
      break
  }
}

const logout = () => {
    Modal.confirm({
      title: '退出登录',
      content: '确定退出登录吗',
      okText: '确定',
      cancelText: '取消',
      onOk: () => {
        // 执行退出登录操作
        // 清除用户信息
        user.username = ''
        user.token = ''
        user.role = ''
        // 跳转到登录页面
        router.push('/login')
        ElMessage.success('已退出登录')
      },
    })
}

</script>

<style scoped>
.admin-container{
  display: flex;
  height: 100%;
  width: 100%;
}
.admin-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  border-bottom-color: rgb(238, 238, 238);
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-top-width: 0 ;
}
.username{
  height: 40px;
  padding: 0 10px;
  overflow: hidden;
  font-size: 12px;
  cursor: pointer;
  align-items: center;
}
</style>
